<template>
  <view>
    <view class="goods—list">
      <block v-for="(item, i) in goodsList" :key="i">
        <my-goods :goods='item' @click="goToDetail"></my-goods>
      </block>
    </view>
  </view>
</template>

<script setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { ref } from 'vue';
  import * as mockData from '../../api/mock.js'
  import MyGoods from '../../conponents/my-goods/my-goods.vue'; // 组件需要
  // 请求参数
  const queryObj = ref({
    query: '', // 查询关键词
    cid: '', // 商品分类id
    pagenum: 1, // 第几页
    pagesize: 10, // 一页几条数据
  })
  const goodsList = ref([]); // 商品列表
  const total = ref(0); // 商品总数量，用于实现分页
  const flag = ref(false); // 节流阀，可以理解为是否正在请求
  
  onLoad((option) => {
    queryObj.value.query = option.query || '';
    queryObj.value.cid = option.cid || '';
    getGoodsList(); // 获取商品列表
  })
  // 获取商品列表
  function getGoodsList(cb) {
    flag.value = true; // 正在请求
    uni.showLoading({
      title: '数据加载中...'
    })
    // const { data: res } = await uni.$http.get('/api/public/v1/goods/search', queryObj.value);
    // if(Object.prototype.toString.call(res) !== '[object Object]' || res?.meta?.status !== 200) {
    //   // uni.$showMsg方法在main中封装
    //   return uni.$showMsg();
    // }
    // goodsList.value = res.message.goods;
    // total.value = res.message.total;
    
    // goodsList.value = mockData.goodsList;
    // 每一次数据请求完，都要将新的数据添加到总数据里面去。
    goodsList.value = [...goodsList.value, ...mockData.goodsList];
    total.value = 25; // 假设的数据
    uni.hideLoading();
    flag.value = false; // 请求结束了

    cb && cb(); // 关闭节流阀
  }
  onReachBottom(() => {
    if(queryObj.value.pagenum * queryObj.value.pagesize >= total.value) {
      return uni.$showMsg('数据加载完毕！')
    }
    if(flag.value) return // 如果此时正在请求，触底不再发起新的请求
    queryObj.value.pagenum++; // 页面 +1 请求新一页的数据
    getGoodsList();
  })
  onPullDownRefresh(() => {
    console.log('下拉刷新');
    queryObj.value.pagenum = 1;
    goodsList.value = [];
    total.value = 0;
    flag.value = false;
    // 在合适的时机关闭节流阀
    getGoodsList(() => uni.stopPullDownRefresh())
  })
  
  function goToDetail(obj) {
    uni.navigateTo({
      url: `/subpkg/goods_detail/goods_detail?goods_id=${obj.id}`
    })
  }
</script>

<style lang="scss" scoped>
</style>
